<template>
    <div>
      <div class="demo-nav">
        <div class="demo-nav__title">收货地址</div>
        <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
          <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
        </svg>
      </div>
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        :switchable="true"
        @select="onSelect"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
</template>

<script>

  import { selectCustomerAddressList,updateCustomerAddrDefault } from '@/api/customer/customer.js'
  import { Dialog,Toast } from 'vant';

  export default {
    name: "my_address",
    inject:['reload'],
    data(){
      return{
        chosenAddressId: "",
        list: [],
      }
    },
    created() {
      this.getList();
    },
    methods: {
      toBack() {
        //返回上一级页面
        this.$router.go(-1)
      },
      // 查询地址信息列表
      getList(){
        selectCustomerAddressList().then((res) =>{
          for (let i = 0; i < res.data.data.length; i++){
            this.list.push({ "id": null,"name":null,"tel":null,"address":null,"isDefault":null});
            this.list[i].id =  res.data.data[i].customerAddrId;
            this.list[i].name =  res.data.data[i].name;
            this.list[i].tel =  res.data.data[i].tel;
            this.list[i].address = res.data.data[i].province+res.data.data[i].city+res.data.data[i].county+res.data.data[i].addressDetail;
            if(res.data.data[i].isDefault == "1"){
              this.list[i].isDefault = true
              this.chosenAddressId = res.data.data[i].customerAddrId;
            }else{
              this.list[i].isDefault = false
            }
          }
        })
      },
      // 添加配送地址
      onAdd() {
        this.$router.push({path:"/address_edit",query:{addressType:1}});
      },
      // 修改配送地址
      onEdit(item, index) {
        this.$router.push({path:"/address_edit",query:{customerAddrId:item.id,addressType:2}});
      },
      // 切换选中
      onSelect(index,item){
        console.log("index:"+JSON.stringify(index)+"item:"+item);
        Dialog.confirm({
          title: '默认地址',
          message: '设为默认地址吗?',
        }).then(() => {
          updateCustomerAddrDefault(index.id).then((res) => {
            if(res.data.code == 200){
              Toast({
                message: "设置成功",
                position: "top"
              });
              this.reload();
            }
          })
          }).catch(() => {

          });
      },
    },
  }
</script>

<style scoped>

  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
</style>
